
<template>
  <fks-dialog
    width="480"
    :visible.sync="dialogVisible"
    append-to-body
    :close-on-click-modal="false"
  >
    <div slot="title">
      <i
        v-if="type == 'new'"
        class="fks-icon-plus"
      />
      <span
        v-if="type == 'new'"
        style="margin-left: 4px"
      >{{ LANG.ADD }}</span>
      <i
        v-if="type != 'new'"
        class="fks-icon-edit"
      />
      <span
        v-if="type != 'new'"
        style="margin-left: 4px"
      >{{ LANG.EDIT }}</span>
    </div>
    <fks-form
      ref="form"
      v-loading="loading"
      :model="formData"
      :rules="rules"
    >
      <fks-form-item
        :span="12"
        prop="name"
        lead
        :label="LANG.PORTAL_NAME"
      >
        <fks-input
          v-model="formData.name"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        prop="parentName"
        :label="LANG.SUPERIORPORTAL"
      >
        <portal-selector
          :id="formData.id"
          readonly
          :parent-id.sync="formData.parentId"
          :path-id.sync="formData.pathId"
          :path-name.sync="formData.pathName"
          :parent-name.sync="formData.parentName"
          :name="formData.name"
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        prop="sort"
        :label="LANG.SORT"
      >
        <fks-input
          v-model="formData.sort"
          oninput="value=value.replace(/\D/g,'')"
          maxlength="9"
          show-word-limit
        />
      </fks-form-item>
    </fks-form>
    <div slot="footer">
      <fks-button
        type="primary"
        :loading="loading"
        icon="fks-icon-check"
        @click="onSubmit"
      >
        <span style="margin-left: 4px">{{ LANG.SAVE }}</span>
      </fks-button>
    </div>
  </fks-dialog>
</template>
<script>
import * as portalApi from '../api'
import PortalSelector from '../components/PortalSelector'
import { ENUM } from '@/store/State/stateTypes'
export default {
  name: 'PortalDetailDialog',
  components: { PortalSelector },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'new'
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    dialogType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      loading: false,
      formData: {
        parentId: '',
        name: '',
        parentName: '',
        pathName: '',
        pathId: ''
      },
      formRules: {}
    }
  },
  computed: {
    rules() {
      return {
        name: [
          {
            required: true,
            message: this.LANG.PORTAL_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        entName: [
          {
            required: true,
            message: this.LANG.DEPARTMENT_SHORT_NAME_REQUIRED,
            trigger: 'blur'
          }
        ]
      }
    },
    portalType() {
      return this.$store.state[ENUM].portalType
    }
  },
  watch: {
    dialogVisible: {
      deep: true,
      handler(val) {
        this.$emit('update:visible', val)
      }
    },
    visible(val) {
      this.dialogVisible = this.visible
    },
    data: {
      deep: true,
      immediate: true,
      handler: function () {
        if (this.type == 'new') {
          this.formData.type = this.data.type + 1 || this.portalType[0].code
          this.formData.parentName = this.data.name
          this.formData.pathName = this.data.pathName
          this.formData.pathId = this.data.pathId
          this.formData.parentId = this.data.id
        } else {
          this.formData = JSON.parse(JSON.stringify(this.data))
        }
      }
    }
  },
  mounted() {},
  methods: {
    onSubmit() {
      this.loading = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          //编辑门户
          if (this.type != 'new') {
            portalApi
              .modifyPortal(this.formData)
              .then((res) => {
                if (res.status) {
                  this.$message.success(this.LANG.EDIT_SUCCESS)
                  this.$emit('refresh')
                  this.$emit('update:visible', false)
                }
                this.loading = false
              })
              .catch((err) => {
                this.loading = false
              })
          }
          //新增门户
          else {
            //不为顶级门户
            if (this.formData.pathId) {
              this.$set(
                this.formData,
                'pathName',
                `${this.formData.pathName}${this.formData.name}.`
              )
            } else {
              this.$set(this.formData, 'pathName', `.${this.formData.name}.`)
            }
            portalApi
              .addPortal(this.formData)
              .then((res) => {
                if (res.status) {
                  this.$message.success(this.LANG.ADD_SUCCESS)
                  this.$emit('refresh')
                  this.$emit('update:visible', false)
                }
                this.loading = false
              })
              .catch((err) => {
                this.loading = false
              })
          }
        } else {
          this.loading = false
        }
      })
    },
    /**
     * @description: 选择部门切换时处理数据
     */
    pPortalChange(data) {
      if (data.length) {
        this.formData.pathId = data[0].content.pathId
      } else {
        this.formData.pathId = ''
      }
    },
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>